<template>
  <div class="scrollable-container" ref="container" @click="click">
    <div class="scrollable-content" :class="{ 'scrolling-text': isTextOverflow }">
      {{ content }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onUpdated, onMounted } from 'vue';
interface Props {
  content: string;
}
interface Emits {
  (e: 'clickPopup'): void;
}
defineProps<Props>();
const emits = defineEmits<Emits>();
const container = ref<HTMLElement>();
const isTextOverflow = ref<boolean>(false);
const click = () => {
  if (!isTextOverflow.value) {
    return;
  }
  emits('clickPopup');
};
const judgeOverflow = () => {
  if (container.value) {
    isTextOverflow.value = container.value.scrollWidth > container.value.clientWidth;
  }
};
onMounted(() => {
  judgeOverflow();
});
onUpdated(() => {
  judgeOverflow();
});
</script>

<style>
.scrollable-container {
  position: relative;
  width: 85%;
  overflow-x: hidden;
}

.scrollable-content {
  white-space: nowrap;
}

.scrolling-text {
  animation: scrollText 4s linear infinite;
}

@keyframes scrollText {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-120%);
  }
}
</style>
